import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import FileUpload from '../../components/BatchUpload/Upload';
import Finish from '../../components/BatchUpload/Finish';

@connect(({ addemp, publicdata, loading }) => ({
  uploading: loading.effects['publicdata/uploadFile'],
  batchQuery: addemp.batchQuery,
  fileId: publicdata.downloadFile.fileId,
  fileName: publicdata.downloadFile.fileName,
}))
@Form.create({
  mapPropsToFields(props) {
    const { batchQuery } = props;
    return {
      sendType: Form.createFormField({ value: batchQuery.sendType }),
      isSerSetFlag: Form.createFormField({ value: batchQuery.isSerSetFlag }),
    };
  },
})
class Batch extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0,
      showProgress: false,
      resultInfo: {
        // 结果数据必传
        batchName: '', // 任务名称
        taskCount: 0, // 导入数据
        successCount: 0, // 成功数据
        errorCount: 0, // 失败数据
        batNo: '', // 批次号
        errorUrl: '/osApi/annualAdj/custCollectErrorDataByCs/downFile', // 下载错误信息地址
        errorParams: null, // 下载错误数据参数
      },
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { yearAdjTskId, areaId, custId } = location.query;
    this.setState({
      yearAdjTskId,
      areaId,
      custId,
    });
  }

  // 设置当前位置
  setCurrentstep = currentStep => {
    this.setState({ currentStep });
  };

  // 下一步
  onNext = () => {
    const {
      dispatch,
      form: { validateFields },
    } = this.props;
    const { currentStep } = this.state;
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'addemp/getDownloadInfo',
          payload: {
            ...values,
          },
        });
      }
    });
    this.setCurrentstep(currentStep + 1);
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const { dispatch } = this.props;
    const { yearAdjTskId, areaId, custId } = this.state;
    const uploadQuery = { areaId, yearAdjTskId, custId };
    const { currentStep, showProgress, resultInfo } = this.state;
    Object.entries(uploadQuery).forEach(([key, value]) => {
      formData.append(key, value);
    });
    dispatch({
      type: 'publicdata/uploadFile',
      uploadUrl: '/osApi/annualAdj/custCollectByCs/uploadFile',
      payload: formData,
      callback: data => {
        // 可选择性操作，需要上传进度必须有调接口，不需要可直接去看结果
        if (showProgress) {
          // 需要展示进度
        } else {
          // 直接获取结果
          const newData = data;
          newData.errorParams = {
            errorDataBatchId: data.errorDataBatchId,
            custId,
            yearAdjTskId,
          };
          this.setState({
            resultInfo: { ...resultInfo, ...newData, batchName: '采集数据导入' },
            currentStep: currentStep + 1,
          });
        }
      },
    });
  };

  render() {
    const { uploading } = this.props;
    const { currentStep, resultInfo, yearAdjTskId, custId } = this.state;
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <FileUpload
            title="上传新增数据"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: { yearAdjTskId, custId },
              url: '/osApi/annualAdj/getCollectTempletByCs/downFile',
              type: 'POST',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default Batch;
